<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 300px;
      height: 300px;
      background-color: skyblue;

      position: absolute;
      left: 0;
      top: 0;

      transition: all 1s linear;
    }

    p {
      width: 300px;
      height: 300px;
      background-color: orange;

      position: absolute;

      left: 500px;
      top: 500px;
      transition: all 1s linear;
    }
  </style>
</head>
<body>
    <div draggable="true"></div>
    <p></p>
    <script>
        // 对某些元素发生拖拽行为 触发的事件

        // 拖拽 关联两个元素  

        // 1. 拖着走的哪个元素 
        // 2. 松手的时候 放置的元素

        // 注意 一个元素 需要被拖拽 才能触发  
        // 如何让1个元素可以被拖拽 
        //  给一个元素加一个属性  draggable = "true"


        // 拖着走的元素的事件  拖拽
        // 1. dragstart 开始拖拽

        // 2. drag  拖拽移动

        // 3. dragend  拖拽结束  






        // 达到目标松手的元素的时间  拖放

        // 4. dragenter 
            // 拖拽元素进入拖放元素范围内触发 光标进入触发 

        // 5.dragleave 
            // 拖拽元素从拖放元素范围内离开 光标离开触发 

        // 6.dragover 
            // 拖拽元素完全进入拖放元素触发  光标进入


        // 7.drop 
            // 拖拽元素在拖放元素内放手触发 
            
            // 注意事项

            // drop事件会受dragover的影响 
            // 如果我们需要触发drop事件  需要 消除 dragover
            // 带来的影响 
        // ------------



        // var divele = document.querySelector('div');
        // var pele = document.querySelector('p');
        

        // divele.ondragstart = function(){
        //     console.log('你要开始把我拖着走了');
        // }

        // divele.ondrag = function(){
        //     console.log('正在拖着动');
        // }


        // divele.ondragend = function(){
        //     console.log('拖拽结束');
        // }


        // pele.ondragenter = function(){
        //     console.log('拖拽元素进来了');
        // }


        // pele.ondragleave = function(){
        //     console.log('来了又走了');
        // }


        // pele.ondragover = function(){
        //     // console.log('完全进入触发');
        //     return false; // 消除dragover带给drop的影响 
        // }


        // pele.ondrop = function(){
        //     console.log('你在身上放手了');
        // }



        var divele = document.querySelector('div');
        var pele = document.querySelector('p');
        

        // 蓝色完全进入橙色 然后放手  交换位置  

        // 用到drop事件   
        // drop事件受到dragover的影响  需要消除 
        pele.ondragover = function(){
            return false;
        }
        pele.ondrop = function(){
            // 获取div元素的left 和top
            var left = window.getComputedStyle(divele).left;
            var top = window.getComputedStyle(divele).top;

            // 获取p元素的left 和top 
            // 赋值给对方 
            divele.style.left = window.getComputedStyle(pele).left
            divele.style.top = window.getComputedStyle(pele).top


            pele.style.left = left;
            pele.style.top = top;


        }


    </script>
</body>

</html>